<template>
	<view class="comment-add">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" size="24"></u-icon>
			</view>
			<text class="title">写评价</text>
			<view class="submit-btn" @click="submitComment">
				<text>发布</text>
			</view>
		</view>
		
		<view class="scenic-info" v-if="scenic">
			<image :src="scenic.coverImage" class="scenic-icon"></image>
			<text class="scenic-name">{{ scenic.title }}</text>
		</view>
		
		<view class="rating-section">
			<text class="section-title">整体评价</text>
			<view class="stars">
				<u-icon 
					v-for="(star, index) in 5" 
					:key="index"
					:name="index < rating ? 'star-fill' : 'star'"
					:color="index < rating ? '#FFB400' : '#CCCCCC'"
					size="40"
					@click="setRating(index + 1)"
				></u-icon>
			</view>
			<text class="rating-text">{{ ratingTexts[rating - 1] || '点击星星评分' }}</text>
		</view>
		
		<view class="content-section">
			<textarea 
				v-model="content"
				class="textarea"
				placeholder="分享你的游玩体验吧~"
				:maxlength="500"
			></textarea>
			<text class="char-count">{{ content.length }}/500</text>
		</view>
		
		<view class="image-section">
			<text class="section-title">添加图片（选填）</text>
			<view class="image-list">
				<view v-for="(image, index) in images" :key="index" class="image-item">
					<image :src="image" class="image"></image>
					<view class="delete-btn" @click="deleteImage(index)">
						<u-icon name="close-circle-fill" color="#fff" size="24"></u-icon>
					</view>
				</view>
				<view v-if="images.length < 9" class="upload-btn" @click="chooseImage">
					<u-icon name="plus" size="40" color="#999"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 底部发送按钮 -->
		<view class="bottom-bar">
			<button class="submit-button" @click="submitComment">发送</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scenicId: null,
			scenic: null,
			rating: 5,
			content: '',
			images: [],
			ratingTexts: ['很差', '较差', '一般', '很好', '非常好'],
			userId: null
		};
	},
	
	onLoad(options) {
		if (options.scenicId) {
			this.scenicId = options.scenicId;
			this.loadScenicInfo();
		}
		
		// 获取用户ID
		const userInfo = uni.getStorageSync('userInfo') || uni.getStorageSync('user');
		if (userInfo && userInfo.id) {
			this.userId = userInfo.id;
		}
	},
	
	methods: {
		async loadScenicInfo() {
			try {
				const res = await this.$api.getScenicDetail({
					id: this.scenicId
				});
				
				if (res.data && res.data.code === 200) {
					this.scenic = res.data.data;
				}
			} catch (error) {
				console.error('加载景点信息失败', error);
			}
		},
		
		setRating(rating) {
			this.rating = rating;
		},
		
		chooseImage() {
			uni.chooseImage({
				count: 9 - this.images.length,
				success: (res) => {
					this.images = this.images.concat(res.tempFilePaths);
				}
			});
		},
		
		deleteImage(index) {
			this.images.splice(index, 1);
		},
		
		async submitComment() {
			if (!this.userId) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			
			if (!this.content.trim()) {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '发布中...'
			});
			
			try {
				const res = await this.$api.addComment({
					userId: this.userId,
					targetType: 1,
					targetId: this.scenicId,
					content: this.content,
					rate: this.rating,
					images: this.images.join(',')
				});
				
				uni.hideLoading();
				
				if (res.data && res.data.code === 200) {
					uni.showToast({
						title: '评价成功',
						icon: 'success',
						duration: 1500
					});
					
					// 发送事件通知详情页刷新评论
					uni.$emit('refreshComments', {
						scenicId: this.scenicId
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: res.data.message || '评价失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('提交评价失败', error);
				uni.showToast({
					title: '评价失败',
					icon: 'none'
				});
			}
		},
		
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.comment-add {
	min-height: 100vh;
	background: #F5F5F5;
	padding-bottom: 80px;
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 44px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		z-index: 100;
		border-bottom: 1px solid #EEEEEE;
		
		.back-btn {
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.title {
			font-size: 17px;
			font-weight: 500;
			color: #333;
		}
		
		.submit-btn {
			padding: 8px 20px;
			background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
			border-radius: 20px;
			box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
			
			text {
				font-size: 15px;
				font-weight: 600;
				color: #fff;
			}
		}
	}
	
	.scenic-info {
		margin-top: 44px;
		padding: 16px;
		background: #fff;
		display: flex;
		align-items: center;
		gap: 12px;
		
		.scenic-icon {
			width: 80px;
			height: 80px;
			border-radius: 8px;
			object-fit: cover;
		}
		
		.scenic-name {
			flex: 1;
			font-size: 17px;
			font-weight: 500;
			color: #333;
		}
	}
	
	.rating-section {
		margin-top: 12px;
		padding: 20px 16px;
		background: #fff;
		
		.section-title {
			font-size: 15px;
			font-weight: 500;
			color: #333;
			margin-bottom: 16px;
			display: block;
		}
		
		.stars {
			display: flex;
			gap: 8px;
			margin-bottom: 8px;
		}
		
		.rating-text {
			font-size: 14px;
			color: #FF6B6B;
		}
	}
	
	.content-section {
		margin-top: 12px;
		padding: 16px;
		background: #fff;
		
		.textarea {
			width: 100%;
			min-height: 150px;
			font-size: 15px;
			line-height: 1.6;
		}
		
		.char-count {
			display: block;
			text-align: right;
			font-size: 12px;
			color: #999;
			margin-top: 8px;
		}
	}
	
	.image-section {
		margin-top: 12px;
		padding: 16px;
		background: #fff;
		
		.section-title {
			font-size: 15px;
			font-weight: 500;
			color: #333;
			margin-bottom: 16px;
			display: block;
		}
		
		.image-list {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			
			.image-item {
				position: relative;
				width: 100px;
				height: 100px;
				
				.image {
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
				
				.delete-btn {
					position: absolute;
					top: -8px;
					right: -8px;
					width: 24px;
					height: 24px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 50%;
				}
			}
			
			.upload-btn {
				width: 100px;
				height: 100px;
				border: 1px dashed #CCCCCC;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #EEEEEE;
		z-index: 100;
		
		.submit-button {
			width: 100%;
			height: 48px;
			background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
			border-radius: 24px;
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			border: none;
			box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}
</style>
